.MixingStation001 {
	width: 100%;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;

	.Box {
		width: 100%;
		height: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		& > div {
			flex: 1;
			height: 100%;
			padding: 16px;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			&:first-child {
				position: relative;

				&::after {
					position: absolute;
					content: "";
					right: 0;
					top: 0;
					width: 2px;
					height: 100%;
					background: var(--MixingStationBoxRight);
				}
			}

			& > div {
				width: 100%;
			}

			& > div:first-child {
				width: 100%;
				height: 40px;
				background: var(--MixingStationTitleBack);
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 30px;
				font-family: YouSheBiaoTiHei;
				font-weight: 400;
				color: #ffffff;
				margin-top: 20px;
				margin-bottom: 40px;
			}

			& > div:nth-child(2) {
				display: flex;
				align-items: center;
				justify-content: center;
				margin-bottom: 40px;
				cursor: pointer;

				& > img {
					width: 200px;
					height: 210px;
					display: block;
				}

				& > div {
					flex: 1;
					height: 210px;
					background: var(--MixingStationImageBack);
					border-radius: 18px;
					margin: 0 5px;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					& > div:first-child {
						width: 200px;
						height: 120px !important;
						position: relative;

						& > img {
							position: absolute;
							left: 0;
							top: 0;
							width: 100%;
							height: 100%;
							z-index: 1;
						}

						& > div {
							text-align: center;
							width: 100%;
							height: 100%;
							font-size: 56px;
							line-height: 56px;
							font-family: Microsoft YaHei;
							font-weight: bold;
							color: #ffffff;
							position: relative;
							z-index: 2;
						}
					}

					& > div:last-child {
						font-size: 30px;
						font-family: YouSheBiaoTiHei;
						font-weight: 400;
						color: rgb(241, 214, 130);
					}

					&:nth-child(3) {
						& > div:first-child {
							width: 240px;
							position: relative;
						}
					}
				}
			}

			& > .ChartsBox {
				flex: 1;
			}
		}
	}

	& > .Top,
	& > .Bottom {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: center;

		&.Top {
			flex: 1;
			margin-bottom: 16px;
		}

		&.Bottom {
			flex: 1;
		}

		.One {
			height: 100%;
			padding: 8px 0;
			display: flex;
			align-items: center;
			justify-content: center;

			& > div {
				height: 100%;
				padding: 0 16px;

				&:first-child {
					flex: 1;
					position: relative;

					&::after {
						position: absolute;
						content: "";
						right: 0;
						top: 10%;
						width: 2px;
						height: 80%;
						background: linear-gradient(
							0deg,
							rgba(174, 226, 255, 0),
							rgba(174, 226, 255, 1),
							rgba(174, 226, 255, 0)
						);
					}

					& > .OneData {
						height: calc(100% - 40px);
						padding: 0 16px;
						display: flex;
						align-items: center;
						justify-content: center;

						& > img {
							width: 246px;
							height: 262px;
							display: block;
						}

						& > div:nth-child(2) {
							flex: 1;
							display: flex;
							align-items: center;
							justify-content: flex-start;
							flex-direction: column;

							& > div:first-child {
								width: 100%;
								height: 40px;
								background: linear-gradient(
									90deg,
									rgba(0, 60, 200, 0),
									rgba(0, 60, 200, 0.4),
									rgba(0, 60, 200, 0)
								);
								display: flex;
								align-items: center;
								justify-content: center;
								margin-bottom: 40px;

								& > div {
									display: flex;
									align-items: center;
									justify-content: center;
									margin: 0 16px;

									& > div:first-child {
										font-size: 14px;
										font-family: Microsoft YaHei;
										font-weight: 400;
										color: #ffffff;
										margin-right: 8px;
									}

									& > div:last-child {
										font-size: 14px;
										font-family: Microsoft YaHei;
										font-weight: 400;
										color: #a1d4ff;
										background: transparent;
										border: none;

										.ant-select-selector {
											background: transparent;
											border: none;
										}

										.ant-picker-input > input {
											font-size: 14px;
											font-family: Microsoft YaHei;
											font-weight: 400;
											color: #a1d4ff;
										}
									}
								}
							}

							& > div:last-child {
								display: flex;
								align-items: center;
								justify-content: space-between;
								flex: 1;
								height: 162px;

								& > div:first-child {
									height: 162px;
									display: flex;
									align-items: center;
									justify-content: space-between;
									flex-direction: column;
									margin: 0 24px;

									& > img {
										width: 58px;
										height: 58px;
										display: block;
									}
								}

								& > div:last-child {
									flex: 1;
									height: 162px;
									display: flex;
									align-items: center;
									justify-content: flex-start;
									align-content: center;
									flex-wrap: wrap;

									& > div {
										width: 40%;
										position: relative;
										margin: 20px 0;
										margin-right: 9%;

										&::after {
											position: absolute;
											content: "";
											left: 0;
											bottom: 0px;
											width: 100%;
											height: 8px;
											background: linear-gradient(
												90deg,
												rgba(86, 255, 238, 0.2),
												rgba(86, 255, 238, 0.2),
												rgba(86, 255, 238, 0)
											);
											z-index: -1;
										}

										& > div:first-child {
											height: 22px;
											line-height: 22px;
											font-size: 22px;
											font-family: YouSheBiaoTiHei;
											font-weight: 400;
											color: #00ffeb;
										}

										& > div:last-child {
											display: flex;
											align-items: baseline;
											justify-content: flex-start;
											height: 40px;
											line-height: 40px;
											font-size: 39px;
											font-family: YouSheBiaoTiHei;
											font-weight: 400;
											color: #ffffff;

											& > span {
												font-size: 24px;
												font-family: Microsoft YaHei;
												font-weight: bold;
												color: #ffffff;
											}
										}
									}
								}
							}
						}
					}
				}

				&:last-child {
					flex: 1;
				}

				.TwoData {
					width: 100%;
					height: calc(100% - 40px);
					display: flex;
					align-items: center;
					justify-content: space-between;

					& > div:first-child {
						height: 250px !important;
					}

					& > div:last-child {
						width: 100%;
						display: flex;
						align-items: center;
						justify-content: center;
						flex-direction: column;

						& > div {
							width: 100%;
							flex: 1;
							margin: 4px 5%;
							display: flex;
							align-items: center;
							justify-content: space-between;
							position: relative;

							&::after {
								position: absolute;
								content: "";
								left: 0;
								bottom: 0px;
								width: 100%;
								height: 8px;
								background: linear-gradient(
									90deg,
									rgba(86, 255, 238, 0.2),
									rgba(86, 255, 238, 0.2),
									rgba(86, 255, 238, 0)
								);
								z-index: -1;
							}

							& > div:first-child {
								font-size: 21px;
								font-family: YouSheBiaoTiHei;
								font-weight: 400;
							}

							& > div:last-child {
								font-size: 19px;
								font-family: YouSheBiaoTiHei;
								font-weight: 400;
								color: #ffffff;
							}
						}
					}
				}
			}
		}

		.Two {
			padding: 16px;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;

			& > div:first-child {
				width: 100%;
				flex: 1;
				padding: 0 16px 16px 16px;

				& > div {
					width: 100%;
					height: 100%;
				}
			}

			& > div:last-child {
				display: flex;
				align-items: center;
				justify-content: center;
				width: 80%;
				height: 38px;
				background: #002767;
				border: 1px solid #8fd1d6;
				border-radius: 6px;
				font-size: 18px;
				font-family: Microsoft YaHei;
				font-weight: bold;
				color: #b2fbfd;
				box-sizing: border-box;
				cursor: pointer;
			}
		}

		.Thr {
			height: 100%;
		}
	}
}
